import { Modal, Skeleton } from 'antd'
import cs from 'classnames'
import Image from 'next/image'
import { useContext, useEffect, useState } from 'react'

import { EnumsRes, Violation } from '@/api/interface'
import { Enums } from '@/api/modules'
import file from '@/assets/images/file.png'
import { GlobalContext } from '@/context'
import { usedownloadDoc } from '@/utils/useDownload'
import useLocale from '@/utils/useLocale'

import locale from './locale'
import styles from './styles/index.module.less'

interface Props {
  violation: Partial<Violation>
  isModalOpen: boolean
  setIsModalOpen: (_: boolean) => void
}

export default function EntityView({ violation, isModalOpen, setIsModalOpen }: Props) {
  const t = useLocale(locale)

  const { lang } = useContext(GlobalContext)

  const [loading, setLoading] = useState(true)

  useEffect(() => {
    console.log(violation)
    isModalOpen && getEnums()
  }, [isModalOpen])

  const [, setEnums] = useState<{ [key: string]: EnumsRes[] }>({
    ViolationTypeA: [],
    ViolationTypeB: [],
    Nationality: [],
    Complainant: [],
    ViolatorOrWitness: [],
  })

  const getEnums = async () => {
    try {
      setLoading(true)
      const enumData = await Promise.all([
        Enums({ type: 'ViolationTypeAEnums' }),
        Enums({ type: 'ViolationTypeBEnums' }),
        Enums({ type: 'NationalityEnums' }),
        Enums({ type: 'ComplainantEnums' }),
        Enums({ type: 'ViolatorOrWitnessEnums' }),
      ])
      setEnums({
        ViolationTypeA: enumData[0].data,
        ViolationTypeB: enumData[1].data,
        Nationality: enumData[2].data,
        Complainant: enumData[3].data,
        ViolatorOrWitness: enumData[4].data,
      })
    } finally {
      setLoading(false)
    }
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const filterEnum = (obj: any) => {
    console.log(obj)
    return <>{obj.value[lang === 'en-US' ? 'en' : 'ar']}</>
  }

  const filterViolationEnum = (keys: any[]) => {
    if (!keys) return '--'
    let formattedValues = ''
    keys.forEach((item, index) => {
      const valueToUse = item.value[lang === 'en-US' ? 'en' : 'ar']
      formattedValues += valueToUse
      if (index !== keys.length - 1) formattedValues += ', '
    })
    return formattedValues
  }

  return (
    <Modal
      centered
      width={900}
      title={t['view.title']}
      footer={false}
      open={isModalOpen}
      onCancel={handleCancel}
      className={styles['view-modal']}
      classNames={{
        header: styles['view-header'],
        body: styles['view-body'],
      }}
      wrapClassName={styles['view-wrapper']}
    >
      <Skeleton loading={loading} title={false} active paragraph={{ rows: 15 }}>
        <div className={styles['view-main']}>
          <div className={styles['view-item-label']}>{t['view.personal.title']}</div>
          <div className={styles['view-descriptions']}>
            <div className={styles['view-descriptions-wrap']}>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.personal.fullName']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  {violation.fullName ? violation.fullName : '--'}
                </span>
              </div>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.personal.complainant']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  {violation.complainantRole?.value[lang === 'en-US' ? 'en' : 'ar']}
                </span>
              </div>
            </div>
            <div className={styles['view-descriptions-wrap']}>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.personal.email']}
                </span>
                <span className={styles['view-descriptions-value']}>{violation.email ?? '--'}</span>
              </div>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.personal.mobile']}
                </span>
                <span className={cs(styles['view-descriptions-value'], 'ltr')}>
                  {violation.mobile ? `+971${violation.mobile.substring(1)}` : '--'}
                </span>
              </div>
            </div>
          </div>

          <div className={styles['view-line']}></div>

          <div className={styles['view-item-label']}>{t['view.complaint.title']}</div>
          <div className={styles['view-descriptions']}>
            <div className={styles['view-descriptions-item-hundred']}>
              <span className={styles['view-descriptions-label']}>
                {t['view.complaint.violation.typeA']}
              </span>
              <span className={styles['view-descriptions-value']}>
                {/* {filterEnum(violation.violationTypeA!, 'ViolationTypeA')} */}
                {violation.violationTypeA?.length
                  ? filterViolationEnum(violation.violationTypeA!)
                  : '--'}
              </span>
            </div>
            <div className={styles['view-descriptions-item-hundred']}>
              <span className={styles['view-descriptions-label']}>
                {t['view.complaint.violation.typeB']}
              </span>
              <span className={styles['view-descriptions-value']}>
                {/* {filterEnum(violation.violationTypeB!, 'ViolationTypeB')} */}
                {violation.violationTypeB?.length
                  ? filterViolationEnum(violation.violationTypeB!)
                  : '--'}
              </span>
            </div>

            <div className={styles['view-descriptions-item-hundred']}>
              <span className={styles['view-descriptions-label']}>
                {t['view.complaint.description']}
              </span>
              <span className={styles['view-descriptions-value']}>
                {violation.violationDesc ?? '--'}
              </span>
            </div>
            <div className={styles['view-descriptions-wrap']}>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.complaint.violationDate']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  {violation.violationDate ?? '--'}
                </span>
              </div>
              <div className={styles['view-descriptions-item']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.complaint.incidentDate']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  {violation.incidentDiscoveredDate ?? '--'}
                </span>
              </div>
            </div>
            <div className={styles['view-descriptions-item-hundred']}>
              <span className={styles['view-descriptions-label']}>
                {t['view.complaint.reported']}
              </span>
              <span className={styles['view-descriptions-value']}>
                {violation.hasReported
                  ? t['view.complaint.reported.radio.yes']
                  : t['view.complaint.reported.radio.no']}

                {violation.hasReported
                  ? ` (${t['view.complaint.entityName']}: ${violation.refEntity ?? '--'}; ${
                      t['view.complaint.reference']
                    }: ${violation.refRefNumber ?? '--'}; ${t['view.complaint.complianceDate']}: ${
                      violation.refMonth
                    }/${violation.refYear})`
                  : ''}
              </span>
            </div>
          </div>

          <div className={styles['view-line']}></div>

          <div className={styles['view-item-label']}>{t['view.additional.title']}</div>
          <div className={styles['view-descriptions']}>
            <div className={styles['view-descriptions-item-hundred']}>
              <span className={styles['view-descriptions-label']}>
                {t['view.additional.details']}
              </span>
              <span className={styles['view-descriptions-value']}>
                {violation.violationAdditionalDetails ?? '--'}
              </span>
            </div>
            {violation.violators?.length ? (
              <div className={styles['view-descriptions-item-hundred']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.additional.witnesses']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  <span className={styles['view-confirm-witnesses']}>
                    {violation.violators?.map((item, index) => {
                      return (
                        <div className={styles['view-descriptions-value']} key={index}>
                          {item.concernedParties ? item.concernedParties : '--'}
                          <span className="mr-2 ml-2">/</span>
                          {item?.role ? filterEnum(item?.role) : '--'}
                          <span className="mr-2 ml-2">/</span>
                          {item?.nationality ? filterEnum(item?.nationality) : '--'}
                        </div>
                      )
                    })}
                  </span>
                </span>
              </div>
            ) : (
              <></>
            )}
            {violation.supportEntities?.length ? (
              <div className={styles['view-descriptions-item-hundred']}>
                <span className={styles['view-descriptions-label']}>
                  {t['view.additional.attachments']}
                </span>
                <span className={styles['view-descriptions-value']}>
                  <div className={styles['view-file']}>
                    {violation.supportEntities!.map((item, index) => {
                      return (
                        <div
                          className={cs(styles['view-file-item'], ' cursor-pointer')}
                          key={index}
                          onClick={() => {
                            usedownloadDoc(item.href)
                          }}
                        >
                          <Image src={file} className={styles['file-icon']} alt="file" />
                          <span className={styles['file-text']}>{item.href}</span>
                        </div>
                      )
                    })}
                  </div>
                </span>
              </div>
            ) : (
              <></>
            )}
          </div>
        </div>
      </Skeleton>
    </Modal>
  )
}
